@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

body {
	text-align: center;
	/*margin: auto;*/
	font-family: 'Nanum Gothic';
	background-color: #ffffff;
	/*background-image: url(http://subtlepatterns.com/patterns/tweed.png);*/
	/*background-image: url(./image.png);*/
	background-image: url(./wood.jpg);
}

form {
	width: 360px;
	padding: 20px;
	margin: auto;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background: -moz-linear-gradient(19% 75% 90deg, #3366FF, #3399FF);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3399FF), to(#3366FF));
	-moz-box-shadow: 0px -5px 300px #FF0099;
	-webkit-box-shadow: 0px -5px 300px #FF0099;
	font-family: 'Nanum Gothic';
	font-size: 20px;
	color: #ffffff;
	font-weight: bold;
}
header, footer, p {
	color: #000000;
}


input {
	width: 200px;
	height: 30px;
	background: #CCFFFF;
	padding: 6px;
	margin-bottom: 10px;
	border-top: 0px;
	border-right: 0px solid #000099;
	border-left: 0px;
	border-bottom: 0px solid #000099;
	-webkit-transition-property: -webkit-box-shadow, background;
	-webkit-transition-duration: 0.25s;
	-moz-box-shadow: 0px 0px 2px #33CCFF;
	-webkit-box-shadow: 0px 0px 2px #33CCFF;
	font-family: 'Nanum Gothic';
	font-size: 20px;
}
input:hover {
	-moz-box-shadow: 0px 0px 4px #33CCFF;
	-webkit-box-shadow: 0px 0px 4px #33CCFF;
	background: #ebe8d9;
}

.button {

	background: #0000BB;
	width: 200px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-transition: all 0s 0;
	-moz-transition: all 0s 0;
	-o-transition: all 0s 0;
	transition: all 0s 0;
	padding: 4px 10px;
	font-size: 20px;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	font-family: 'Nanum Gothic';
}
.button:hover {

	background: -moz-linear-gradient(19% 75% 90deg, #CC0099, #FF0099);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0099), to(#CC0099));
	-webkit-box-shadow: 0px 0px 0px 2px #ffbfab;
	-moz-box-shadow: 0px 0px 0px 2px #ffbfab;
	box-shadow: 0px 0px 0px 2px #ffbfab;
	border-color: #ffbfab;
}
footer {
	position: relative;
	margin-top: -5px;
	height: 5px;
	clear: both;
	font-size: 20px;
}
#main {
	width: 1600px;
	margin: auto;
	margin-top: 10px;
}
#folder {

	width: 300px;
	height: 700px;
	margin: 5px 5px;
	background: #ebe8d9;
	padding: 5px 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	color: black;
	font-size: 15px;
	float: left;
	overflow-x: scroll;
	overflow-y: auto;
}
#memo {

	width: 300px;
	height: 700px;
	margin: 5px 5px;
	background: #ebe8d9;
	padding: 5px 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	color: black;
	font-size: 15px;
	float: left;
	overflow-x: scroll;
	overflow-y: auto;
}
#memoContent {

	width: 800px;
	height: 700px;
	margin: 5px 5px;
	background: #ebe8d9;
	padding: 5px 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	color: black;
	font-size: 15px;
	float: left;
}
.memoBtn {
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	background-image: -o-linear-gradient(top, #3498db, #2980b9);
	background-image: linear-gradient(to bottom, #3498db, #2980b9);
	-webkit-border-radius: 10;
	-moz-border-radius: 10;
	border-radius: 10px;
	color: #ffffff;
	font-weight: bold;
	font-size: 20px;
	padding: 2px 8px;
	height: 50px;
	width: 300px;
}
.memoBtn:hover {
	background: #3cb0fd;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
.folderList, .memoList {
	
	/*
	overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	*/
	


	font-size: 18px;
	height: 40px;
	width: 300px;
	font-family: Arial;
	font-weight: bold;
	
	border: 1px solid #dcdcdc;
	padding: 5px 40px;
	text-decoration: none;
	background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background: -ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color: #ededed;
	color: #777777;
	display: inline-block;
	text-shadow: 1px 1px 8px #ffffff;
	-webkit-box-shadow: 1px 1px 0px -8px #ffffff;
	-moz-box-shadow: 1px 1px 0px -8px #ffffff;
	box-shadow: 1px 1px 0px -8px #ffffff;
}
.folderList, .memoList :hover {
	background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background: -ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color: #dfdfdf;
}
.folderList, .memoList : active {
	position: relative;
	top: 1px;
}

#delete {

	border: 1px solid #000000;
	-webkit-border-radius: 10px;
	background: red;
}
.click, .folderclick { /* 셀렉터 스타일 */

	
	-moz-box-shadow: 0px 0px 4px #33CCFF;
	-webkit-box-shadow: 0px 0px 4px #33CCFF;
	box-shadow: 0px 0px 4px #33CCFF;
	background: #FFCCCC;
	
	
	
}
textarea {
	overflow-x: scroll;
	overflow-y: auto;
	font-size: 20px;
	background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y;
	width: 750px;
	height: 600px;
	font: 14px;
	font-family: 'Nanum Gothic';
	line-height: 25px;
	padding: 2px 10px;
	border: solid 1px #ddd;
}
.title {

	font-size: 18px;
	height: 60px;
	width: 300px;
	font-family: Arial;
	font-weight: bold;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #dcdcdc;
	padding: 5px 40px;
	text-decoration: none;
	background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background: -ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color: #ededed;
	color: #777777;
	display: inline-block;
	text-shadow: 1px 1px 8px #ffffff;
	-webkit-box-shadow: 1px 1px 0px -8px #ffffff;
	-moz-box-shadow: 1px 1px 0px -8px #ffffff;
	box-shadow: 1px 1px 0px -8px #ffffff;
}
.title:hover {
	background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background: -ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color: #dfdfdf;
}
.title:active {
	position: relative;
	top: 1px;
}
#image {

	
	float : left;
	margin-left:  150px;
	/*margin: auto;*/
	
}
#removeFolderBtn, #removeMemoBtn {

	height:40px;
	width: 30px;
 	position : absolute; 
 	margin-left : -300px;
 	
	font-family: Arial;
	font-weight: bold;
	
	border: 1px solid #dcdcdc;
	padding: 5px 3px;
	text-decoration: none;
	background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background: -ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color: #ededed;
	color: #777777;
	display: inline-block;
	text-shadow: 1px 1px 8px #ffffff;
	-webkit-box-shadow: 1px 1px 0px -8px #ffffff;
	-moz-box-shadow: 1px 1px 0px -8px #ffffff;
	box-shadow: 1px 1px 0px -8px #ffffff;

	
	
}
#removeFolderBtn, #removeMemoBtn :hover {
	background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background: -ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color: #dfdfdf;
}

#removeFolderBtn, #removeMemoBtn : active {
	position: relative;
	top: 1px;
}
